<script setup>
    import { onMounted } from 'vue'
    import { getCityList } from '@/common/apis'

    import BasicInfo from './BasicInfo/BasicInfo.vue'
    import Company from './Company/Company.vue'
    import ThirdParty from './ThirdParty/ThirdParty.vue'
    import PostEngage from './Post/PostEngage.vue'
    import Placement from './Placement/Placement.vue'
    import DailySupervision from './DailySupervision/DailySupervision.vue'
    import Subsidy from './Subsidy/Subsidy.vue'
    import Secede from './Secede/Secede.vue'
    import Capital from './Capital/Capital.vue'
    import Portrayal from './Portrayal/Portrayal.vue'


    let cityData = $ref([])
    onMounted(() => {
        getCityList().then(res => {
            // let data = res.result[0].children
            cityData = res.result

            // data.map((item, index) => {
            //     cityData.push({
            //         label: item.departName,
            //         value: item.orgCode,
            //         children: []
            //     })

            //     item.children.map(child => {
            //         cityData[index].children.push({
            //             label: child.departName,
            //             value: child.orgCode
            //         })
            //     })

            // })
        })
    })


    // 当前tabbar index
    let currentTabbarIndex = $ref(0)

    const showList = (index) => {
        currentTabbarIndex = index
    }

    defineExpose({
        showList
    })

</script>

<template>
    <div class="rule-of-law-member-search">
        <!-- 基础信息库 -->
        <basic-info v-if="currentTabbarIndex == 0" ></basic-info>

        <!-- 单位管理 -->
        <company v-if="currentTabbarIndex == 1"></company>

        <!-- 第三方机构管理 -->
        <third-party v-if="currentTabbarIndex == 2"></third-party>

        <!-- 岗位/聘用管理 -->
        <post-engage v-if="currentTabbarIndex == 3"></post-engage>

        <!-- 安置对象管理 -->
        <placement v-if="currentTabbarIndex == 4"></placement>

        <!-- 日常监管 -->
        <daily-supervision v-if="currentTabbarIndex == 5"></daily-supervision>

        <!-- 补贴资金管理 -->
        <subsidy v-if="currentTabbarIndex == 6"></subsidy>

        <!-- 公岗退出管理 -->
        <secede v-if="currentTabbarIndex == 7"></secede>

        <!-- 资金监管 -->
        <capital v-if="currentTabbarIndex == 8"></capital>

        <!-- 人员画像 -->
        <portrayal v-if="currentTabbarIndex == 9"></portrayal>
    
        
    </div>

    
</template>

<style lang="less">
    .rule-of-law-member-search{
        height: 870px;
        background: rgba(19,42,146,0.25);
        padding: 15px;

        .title-text{
            font-size: 24px;
            display: inline-block;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #0096FF;
            padding: 16px 0 0 16px;
            // line-height: 63px;

            background: linear-gradient(92deg, #006FFF 0%, #00EEFF 48.8525390625%, #00ABFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .health-search{
            .health-search-form-warp{
                margin: 20px 0 10px 0;
                padding: 20px;
                background: rgba(5,187,241,0.13);
        
                .el-input, .el-select{
                    width: 134px;
                }
        
                .el-range-editor.el-input__wrapper{
                    background: transparent;
                    width: 380px;
                }
    
                .el-form--inline .el-form-item{
                    margin: 0 16px 16px 0;
                }
        
                .btn-wrap{
                    display: inline-block;
                    vertical-align: top;
        
                    .btn{
                        display: inline-block;
                        width:76px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 4px;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        cursor: pointer;
        
                        &.reset{
                            border: 1px solid #fff;
                        }
        
                        &.search{
                            background: #00A4FF;
                            margin-left: 10px;
                        }
                    }
                }
            }
        
            .search-result{
                // margin: 0 16px 20px 16px;
                // max-height: 760px;
                padding: 20px;
                background: rgba(5,187,241,0.13);
                color: #fff;
    
            }
        }

        .top-tabbar-wrap{
            display: inline-block;
            border: 1px solid #00A4FF;
            
            .tabbar-item{
                width: 130px;
                height: 40px;
                display: inline-block;
                line-height: 40px;
                text-align: center;
                color: #00A4FF;
                font-size: 18px;
                cursor: pointer;
                border-right: 1px solid #00A4FF;

                &.active, &:hover{
                    background: #00A4FF;
                    color: #fff;
                }

                &:last-child{
                    border: none;
                }
            }
        }
    }

    .result-title{
        height: 24px;
        line-height: 24px;
        margin-bottom: 20px;
        color: #fff;
    }

    .result-title .result-count{
        font-size: 24px;
        color: #00E7FF;
        margin-left: 13px;
    }

    .table-operation{
        span{
            color: #00C0FF;
            font-size: 16px;
            margin-right: 15px;

            &:last-child{
                margin: 0;
            }
        }
    }

</style>